import React, { useState } from 'react';
import { history } from 'umi';
import { Row, Col, Steps, Typography, Form, Input, Radio, Button, RadioChangeEvent, Card, Dropdown, Menu } from 'antd';
import styles from './style.less';
import DebounceSelect from './components/DebounceSecect';
import { OptionsValue } from './data';
import { selectSearch } from './service';
import Rules from './mockData';
import DetailTable from './components/DetailTable';
import { DownOutlined } from '@ant-design/icons';
console.log(Rules)

const { Step } = Steps;
const { Title } = Typography;

function handleMenuClick(e: any) {
  console.log('click', e);
}

const menu = (
  <Menu onClick={handleMenuClick}>
    <Menu.Item key="1">
      批量修改出价
    </Menu.Item>
    <Menu.Item key="2">
      批量修改匹配方式
    </Menu.Item>
    <Menu.Item key="3">
      批量修改P-URL
    </Menu.Item>
    <Menu.Item key="4">
      批量修改M-URL
    </Menu.Item>
    <Menu.Item key="5">
      批量删除
    </Menu.Item>
  </Menu>
)


export default function Detail() {
  const [planForm] = Form.useForm();
  const [basicForm] = Form.useForm();
  const [budgetBidForm] = Form.useForm();
  const [value, setValue] = useState<OptionsValue[]>([]);
  // const params = useLocation();
  console.log(history.location);
  // const name = history.location.state.name;
  const [radioValue, setRadioValue] = useState(1);

  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  const onChange = (e: RadioChangeEvent) => {
    console.log('radio checked', e.target.value);
    setRadioValue(e.target.value);
  };

  const handleCancel = () => {
    basicForm.resetFields();
    budgetBidForm.resetFields();
    history.goBack();
  }

  return (
    <Row className={styles.row}>
      <Col flex={1}>
        <Steps progressDot current={1} direction="vertical" className={styles.step}>
          <Step
            title="推广计划"
            description=''
          />
          <Step
            title="推广单元"
            description={
              <>
                <div>目标详情</div>
                <div>投放位置</div>
                <div>预算及出价</div>
                <div>用户定向</div>
                <div>第三方推广链接</div>
              </>
            }
          />
          <Step
            title="推广创意"
            description={
              <>
                <div>制作创意</div>
                <div>创意分类</div>
                <div>推广卡片</div>
                <div>落地页</div>
              </>
            }
          />
        </Steps>
      </Col>
      <Col flex={22} style={{maxWidth: '90%'}}>
        <div className={styles.container}>
          <Form.Provider>
            {/* 推广计划表单 */}
            <Form form={planForm} name="planForm" className={styles.form} onFinish={onFinish} labelCol={{ span: 6 }}>
              <Form.Item name='planName' label='推广计划' rules={Rules.planForm.planName} className={styles.formItem}>
                XXXX
              </Form.Item>
            </Form>
            {/* 标题 */}
            <Title level={5}>目标详情</Title>
            {/* 目标详情表单 */}
            <Form form={basicForm} name="basicForm" className={styles.form} onFinish={onFinish} labelCol={{ span: 6 }} initialValues={{ target: 0 }}>
              <Form.Item name='unitName' label='单元名称' rules={Rules.basicForm.unitName} className={styles.formItem}>
                <Input placeholder='请输入单元名称' allowClear className={styles.formItemContent} />
              </Form.Item>
              <Form.Item label='优化目标' rules={Rules.basicForm.unitPrice} className={styles.formItem}>
                <Form.Item name='unitPrice'>
                  <Input placeholder='请输入优化目标' allowClear className={styles.formItemContent} />
                </Form.Item>
              </Form.Item>
              <Form.Item name='target' label='转化归因' rules={Rules.basicForm.target} className={styles.formItem}>
                <Radio.Group onChange={onChange} value={radioValue}>
                  <Radio value={0}>全网归因</Radio>
                  {/* <Radio value={1}>设置单元移动出价系数</Radio> */}
                </Radio.Group>
              </Form.Item>
            </Form>
            {/* 标题 */}
            <Title level={5}>投放位置</Title>
            {/* 投放位置表单 */}
            <Form form={basicForm} name="basicForm" className={styles.form} onFinish={onFinish} labelCol={{ span: 6 }} initialValues={{ target: 0 }}>
              <Form.Item name='unitName' label='投放平台' rules={Rules.basicForm.unitName} className={styles.formItem}>
                <Input placeholder='请输入投放平台' allowClear className={styles.formItemContent} />
              </Form.Item>
              <Form.Item name='unitPrice' label='广告位置' rules={Rules.basicForm.unitPrice} className={styles.formItem}>
                <Input placeholder='请输入优化目标' allowClear className={styles.formItemContent} />
              </Form.Item>
              <Form.Item name='target' label='关键词' rules={Rules.basicForm.target} className={styles.formItem}>
                <Radio.Group onChange={onChange} value={radioValue}>
                  <Radio value={0}>不启用</Radio>
                  <Radio value={1}>启用</Radio>
                </Radio.Group>
              </Form.Item>
            </Form>
            {/* 标题 */}
            <Title level={5}>预算及出价</Title>
            {/* 预算及出价表单 */}
            <Form form={basicForm} name="basicForm" className={styles.form} onFinish={onFinish} labelCol={{ span: 6 }} initialValues={{ target: 0 }}>
              <Form.Item name='unitName' label='投放方式' rules={Rules.basicForm.unitName} className={styles.formItem}>
                <Radio.Group onChange={onChange} value={radioValue}>
                  <Radio value={0}>标准投放</Radio>
                  <Radio value={1}>加速投放</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item label='竞价策略' rules={Rules.basicForm.unitPrice} className={styles.formItem}>
                <Radio.Group onChange={onChange} value={radioValue}>
                  <Radio value={0}>优先跑量</Radio>
                  <Radio value={1}>均衡投放</Radio>
                  <Radio value={2}>控制成本上限</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item name='target' label='日预算' rules={Rules.basicForm.target} className={styles.formItem}>
                <Form.Item name='unitPrice'>
                  <Input placeholder='请输入优化目标' allowClear className={styles.formItemContent} />
                  <span>每日预算为300~400万元</span>
                </Form.Item>
              </Form.Item>
              <Form.Item name='unitName' label='投放日期' rules={Rules.basicForm.unitName} className={styles.formItem}>
                <Radio.Group onChange={onChange} value={radioValue}>
                  <Radio value={0}>长期投放</Radio>
                  <Radio value={1}>自定义时间</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item name='unitName' label='投放时段' rules={Rules.basicForm.unitName} className={styles.formItem}>
                <Radio.Group onChange={onChange} value={radioValue}>
                  <Radio value={0}>不限</Radio>
                  <Radio value={1}>自定义</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item name='unitName' label='付费方式' rules={Rules.basicForm.unitName} className={styles.formItem}>
                <Radio.Group onChange={onChange} value={radioValue}>
                  <Radio value={0}>按点击收费</Radio>
                  <Radio value={1}>按展示收费</Radio>
                </Radio.Group>
                <span>出价为0.2~100元</span>
              </Form.Item>
              <Form.Item name='unitPrice' label='出价' rules={Rules.basicForm.unitPrice} className={styles.formItem}>
                <Input placeholder='请输入优化目标' allowClear className={styles.formItemContent} />
              </Form.Item>
            </Form>
            {/* 标题 */}
            <Title level={5}>用户定向</Title>
            {/* 用户定向表单 */}
            <Form form={basicForm} name="basicForm" className={styles.form} onFinish={onFinish} labelCol={{ span: 6 }} initialValues={{ target: 0 }}>
              <Form.Item name='unitName' label='地域' rules={Rules.basicForm.unitName} className={styles.formItem}>
                <Radio.Group onChange={onChange} value={radioValue}>
                  <Radio value={0}>不限</Radio>
                  <Radio value={1}>按区域</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item name='unitName' label='性别' rules={Rules.basicForm.unitName} className={styles.formItem}>
                <Radio.Group onChange={onChange} value={radioValue}>
                  <Radio value={0}>不限</Radio>
                  <Radio value={1}>男</Radio>
                  <Radio value={1}>女</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item name='unitName' label='年龄' rules={Rules.basicForm.unitName} className={styles.formItem}>
                <Radio.Group onChange={onChange} value={radioValue}>
                  <Radio value={0}>不限</Radio>
                  <Radio value={1}>自定义</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item name='unitName' label='婚恋状态' rules={Rules.basicForm.unitName} className={styles.formItem}>
                <Radio.Group onChange={onChange} value={radioValue}>
                  <Radio value={0}>不限</Radio>
                  <Radio value={1}>单身</Radio>
                  <Radio value={1}>恋爱</Radio>
                  <Radio value={1}>已婚</Radio>
                  <Radio value={1}>已育</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item name='unitName' label='财产状态' rules={Rules.basicForm.unitName} className={styles.formItem}>
                <Radio.Group onChange={onChange} value={radioValue}>
                  <Radio value={0}>不限</Radio>
                  <Radio value={1}>有房人士</Radio>
                  <Radio value={1}>有车人士</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item name='unitName' label='消费水平' rules={Rules.basicForm.unitName} className={styles.formItem}>
                <Radio.Group onChange={onChange} value={radioValue}>
                  <Radio value={0}>不限</Radio>
                  <Radio value={1}>高消费</Radio>
                  <Radio value={1}>低消费</Radio>
                </Radio.Group>
              </Form.Item>
            </Form>
            {/* 标题 */}
            <Title level={5}>第三方监测链接</Title>
            {/* 第三方监测链接表单 */}
            <Form form={basicForm} name="basicForm" className={styles.form} onFinish={onFinish} labelCol={{ span: 6 }} initialValues={{ target: 0 }}>
              <Form.Item name='unitName' label='展示' rules={Rules.basicForm.unitName} className={styles.formItem}>
                <Input placeholder='请输入投放平台' allowClear className={styles.formItemContent} />
              </Form.Item>
              <Form.Item name='unitName' label='有效触点' rules={Rules.basicForm.unitName} className={styles.formItem}>
                <Input placeholder='请输入投放平台' allowClear className={styles.formItemContent} />
              </Form.Item>
              <Form.Item name='unitName' label='视频播放' rules={Rules.basicForm.unitName} className={styles.formItem}>
                <Input placeholder='请输入投放平台' allowClear className={styles.formItemContent} />
              </Form.Item>
              <Form.Item name='unitName' label='视频播完' rules={Rules.basicForm.unitName} className={styles.formItem}>
                <Input placeholder='请输入投放平台' allowClear className={styles.formItemContent} />
              </Form.Item>
            </Form>
          </Form.Provider>
          <div className={styles.btnGroup}>
            <Button type='primary' className={styles.saveBtn}>保存并新建创意</Button>
            <Button type='primary' className={styles.saveBtn}>仅保存</Button>
            <Button onClick={handleCancel}>取消</Button>
          </div>
          <div className={styles.btnGroup}>
            <Button type='primary' className={styles.saveBtn}>保存</Button>
            <Button onClick={handleCancel}>取消</Button>
          </div>
        </div>
      </Col>
    </Row>
  );
}
